// SCSS version

// Define variables
$color-base: black;
$primary: #005bac;
$success: green;
$warning: orange;
$danger: red;

// Mixin definition
@mixin color($color) {
  $link-hover-color: darken($color, 10%);
  $link-active-color: darken($color, 20%);
  $disabled-color: rgba($color, 0.65);

  color: $color;

  &:hover {
    color: $link-hover-color;
  }

  &:active {
    color: $link-active-color;
  }

  &:active,
  &:hover {
    text-decoration: none;
    outline: 0;
  }

  &:focus {
    text-decoration: none;
    outline: 0;
  }

  &.disabled,
  &[disabled] {
    color: $disabled-color;
  }
}

// Usage of the mixin
.text {
  position: relative;
  display: inline-block;
  color: $color-base;
  text-decoration: none;
  cursor: pointer;
  background-color: transparent; // remove the gray background on active links in IE 10.
  outline: none;
  transition: color 0.3s;
  -webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+.
}

.text-primary {
  @include color($primary);
}

.text-success {
  @include color($success);
}

.text-warning {
  @include color($warning);
}

.text-danger {
  @include color($danger);
}

.text.disabled,
.text[disabled] {
  pointer-events: none;
  cursor: not-allowed;
}
